/**
 * 一些基本信息 不解释了 这个程序是由一些bug的哈哈 不过针对学习来说已经足够 理解就好
 * @type {HTMLElement}
 */
var canvas = document.getElementById('canvas'),
    context = canvas.getContext('2d'),
    rubberbandDiv = document.getElementById('rubberbandDiv'),
    resetButton = document.getElementById('resetButton'),
    image = new Image(),
    mousedown = {},
    rubberbandRectangle = {},
    dragging = false;

// Functions.....................................................
/**
 * 当鼠标按下后 开始记录x y 坐标
 * @param x
 * @param y
 */
function rubberbandStart(x, y) {
    mousedown.x = x;
    mousedown.y = y;

    rubberbandRectangle.left = mousedown.x;
    rubberbandRectangle.top = mousedown.y;
    moveRubberbandDiv();
    showRubberbandDiv();

    dragging = true;
}
/**
 * 每次移动的时候 更改的是鼠标选择框的大小
 * @param x
 * @param y
 */
function rubberbandStretch(x, y) {
    rubberbandRectangle.left = x < mousedown.x ? x : mousedown.x;
    rubberbandRectangle.top = y < mousedown.y ? y : mousedown.y;

    rubberbandRectangle.width = Math.abs(x - mousedown.x), rubberbandRectangle.height = Math.abs(y - mousedown.y);//abs 取绝对值哈

    moveRubberbandDiv();
    resizeRubberbandDiv();
};

/**
 * 抬起鼠标左键后 发生的神奇事情哈
 */
function rubberbandEnd() {
    var bbox = canvas.getBoundingClientRect();//不解释 前面已经说过啦

    try {
        /**
         * 在这里首先详细解释下 context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
         * img : 规定要使用的图像 画布 或者视频
         * sx ： 可选 开始剪切的X坐标值
         * sy : 可选 开始剪切的Y坐标值
         * swidth : 可选 被剪切图像的宽度
         * sheight : 可选 被剪切图像的高度
         * x : 在画布上放置图像的X坐标位置
         * y : 在画布上放置图像的Y坐标位置
         * width : 可选 要使用的图像的宽度（伸展或者是缩小图像）
         * height : 可选 要使用的图像的高度（伸展或者是缩小图像）
         */
        context.drawImage(canvas,
            rubberbandRectangle.left - bbox.left,
            rubberbandRectangle.top - bbox.top,
            rubberbandRectangle.width,
            rubberbandRectangle.height,
            0, 0, canvas.width, canvas.height);
    }
    catch (e) {
        // suppress error message when mouse is released
        // outside the canvas
    }

    resetRubberbandRectangle();

    rubberbandDiv.style.width = 0;
    rubberbandDiv.style.height = 0;
    //隐藏
    hideRubberbandDiv();

    dragging = false;
}
/**
 * 更改rubberbandDiv 的样式
 */
function moveRubberbandDiv() {
    rubberbandDiv.style.top = rubberbandRectangle.top + 'px';
    rubberbandDiv.style.left = rubberbandRectangle.left + 'px';
}
/**
 * 重新设置鼠标选择框的大小
 */
function resizeRubberbandDiv() {
    rubberbandDiv.style.width = rubberbandRectangle.width + 'px';
    rubberbandDiv.style.height = rubberbandRectangle.height + 'px';
}

function showRubberbandDiv() {
    rubberbandDiv.style.display = 'inline';//display 属性规定元素应该生成的框的类型 css内容 哈哈
}

function hideRubberbandDiv() {
    rubberbandDiv.style.display = 'none'; //隐藏
}
/**
 * 复原了鼠标选择框的大小 全部为零了
 */
function resetRubberbandRectangle() {
    rubberbandRectangle = {top: 0, left: 0, width: 0, height: 0};
}

// Event handlers...............................................

canvas.onmousedown = function (e) {
    //获取鼠标点击的X Y值
    var x = e.x || e.clientX,
        y = e.y || e.clientY;

    e.preventDefault();

    rubberbandStart(x, y);
};

window.onmousemove = function (e) {
    var x = e.x || e.clientX,
        y = e.y || e.clientY;

    e.preventDefault();

    if (dragging) {
        rubberbandStretch(x, y);
    }
};

window.onmouseup = function (e) {
    e.preventDefault();
    rubberbandEnd();
};

// Event handlers..............................................
/**
 * 加载图片
 */
image.onload = function () {
    context.drawImage(image, 0, 0, canvas.width, canvas.height);//绘制图片
};
/**
 * 重置图片 其实这里可以进行相应的优化 例如：若是就没有进行过缩放就不要进行此操作了 对吧 哈哈
 * @param e
 */
resetButton.onclick = function (e) {
    context.clearRect(0, 0, context.canvas.width,
        context.canvas.height);
    context.drawImage(image, 0, 0, canvas.width, canvas.height);
};

// Initialization..............................................

image.src = '../../shared/images/arch.png';
